<template>
  <a-modal
    :title="zhutitle"
    :width="900"
    :visible="visible"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭">
  <div>
  <ul ref="comp" style="width:100%;">
    <li style="float:left;list-style:none;">
      <div>
        <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
          <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ charSelectedRowKeys.length }}</a>项
          <a style="margin-left: 24px" @click="charOnClearSelected">清空</a>
        </div>
        <a-table
          ref="charTable"
          size="middle"
          bordered
          :scroll="charTableSize"
          rowKey="brand1"
          :columns="columns"
          :dataSource="dataSource"
          :pagination="false"
          :rowSelection="{selectedRowKeys: charSelectedRowKeys, onSelectAll: onSelectAll, onSelect: charOnSelectChange}">
        </a-table>
      </div>
    </li>
    <li style="float:left;list-style:none;margin-left:1em;">
      <div>
        <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
          <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ brandSelectedRowKeys.length }}</a>项
          <a style="margin-left: 24px" @click="brandOnClearSelected">清空</a>
        </div>
        <a-table
          ref="brandTable"
          size="middle"
          bordered
          :scroll="brandTableSize"
          rowKey="brand2"
          :columns="brandColumns"
          :dataSource="brandDataSource"
          :pagination="false"
          :rowSelection="{selectedRowKeys: brandSelectedRowKeys, onSelectAll: onSelectAll, onSelect: brandOnSelectChange}">
        </a-table>
      </div>
    </li>
    <li style="float:left;list-style:none;margin-left:1em;">
      <div>
        <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
          <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ modelSelectedRowKeys.length }}</a>项
          <a style="margin-left: 24px" @click="modelOnClearSelected">清空</a>
        </div>
        <a-table
          ref="modelTable"
          size="middle"
          bordered
          :scroll="modelTableSize"
          rowKey="b3id"
          :columns="modelColumns"
          :dataSource="modelDataSource"
          :pagination="false"
          :rowSelection="{selectedRowKeys: modelSelectedRowKeys, onChange: modelOnSelectChange}">
        </a-table>
      </div>
    </li>
  </ul>
  </div>
  </a-modal>
</template>

<script>
import { getAction, httpAction } from '@/api/manage'
  import { getTransactionInfo } from '@api/api'
  export default {
    name: "DataLevelRef",
    props: {
    },
    data () {
      return {
        visible:false,
        zhutitle:'品牌选择器',
        charTableSize:{ x: 1, y: 500 },
        columns: [{
            title: '字母',
            align:"center",
            dataIndex: 'brand1'
        }],
        dataSource: [{brand1:'A'},{brand1:'B'},{brand1:'C'},{brand1:'D'},{brand1:'E'},{brand1:'F'},{brand1:'G'}
        ,{brand1:'H'},{brand1:'I'},{brand1:'J'},{brand1:'K'},{brand1:'L'},{brand1:'M'},{brand1:'N'},{brand1:'O'}
        ,{brand1:'P'},{brand1:'Q'},{brand1:'R'},{brand1:'S'},{brand1:'T'},{brand1:'U'},{brand1:'V'},{brand1:'W'}
        ,{brand1:'X'},{brand1:'Y'},{brand1:'Z'}],
        charSelectedRowKeys: [],
        charSelectionRows: [],
        brandColumns: [{
            title: '品牌',
            align:"center",
            dataIndex: 'brand2'
        }],
        brandDataSource: [],
        brandSelectedRowKeys: [],
        brandSelectionRows: [],
        modelColumns: [{
            title: '型号',
            align:"center",
            dataIndex: 'brand3'
        }],
        modelDataSource: [],
        modelSelectedRowKeys: [],
        modelSelectionRows: [],
      }
    },
    computed: {
      brandTableSize() {
        return {x: window.innerWidth*0.12, y: 500}
      },
      modelTableSize() {
        return {x: window.innerWidth*0.18, y: 500}
      }
    },
    methods: {
      onSelectAll() {
      },
      charOnSelectChange(record, selected, selectedRows, nativeEvent) {
        const me = this
        me.modelDataSource = []
        me.brandDataSource = []
        this.charSelectionRows = selectedRows;
        let charSelectedRowKeys = []
        for(let i=0;i<selectedRows.length;i++){
          let itm = selectedRows[i]
          charSelectedRowKeys.push(itm.brand1)
        }
        this.charSelectedRowKeys = charSelectedRowKeys
        let params ={
          b1s: charSelectedRowKeys+""
        }
        getAction("/cxm/cxmBrand/getCxmBrand",params).then((res)=>{
          if(res.success){
            const rs = res.result
            for(let i=0;i<rs.length;i++){
              let itm = rs[i]
              me.brandDataSource.push({
                b2id: itm.b2id,
                brand2: itm.brand2
              })
            }
          }else{
            me.$message.warning(res.message);
          }
        })
      },
      brandOnSelectChange(record, selected, selectedRows, nativeEvent) {
        const me = this
        if(selectedRows.length==0){
          return
        }
        me.modelDataSource = []
        this.brandSelectionRows = selectedRows
        let brandSelectedRowKeys = []
        for(let i=0;i<selectedRows.length;i++){
          let itm = selectedRows[i]
          brandSelectedRowKeys.push(itm.brand2)
        }
        this.brandSelectedRowKeys = brandSelectedRowKeys
        let params ={
          b1s:this.charSelectedRowKeys+"",
          b2s:brandSelectedRowKeys+""
        }
        getAction("/cxm/cxmBrand/getCxmBrand",params).then((res)=>{
          if(res.success){
            const rs = res.result
            for(let i=0;i<rs.length;i++){
              let itm = rs[i]
              me.modelDataSource.push({
                b3id: itm.b3id,
                brand3: itm.brand3,
                b3id: itm.b3id,
                brand3: itm.brand3,
                b3id: itm.b3id,
                brand3: itm.brand3
              })
            }
          }else{
            me.$message.warning(res.message);
          }
        })
      },
      modelOnSelectChange(selectedRowKeys, selectedRows) {
        this.modelSelectedRowKeys = selectedRowKeys;
        this.modelSelectionRows = selectedRows;
        let brands = []
        for(let i=0;i<selectedRows.length;i++){
          let itm = selectedRows[i]
          brands.push(itm.brand3)
        }
        this.$emit("closeMain",{brandIds:selectedRowKeys+"",brands:brands+""})
      },
      charOnClearSelected() {
        this.charSelectedRowKeys = []
        this.charSelectionRows = []
        this.modelDataSource = []
        this.brandDataSource = []
      },
      brandOnClearSelected() {
        this.brandSelectedRowKeys = []
        this.brandSelectionRows = []
        this.modelDataSource = []
      },
      modelOnClearSelected() {
        this.modelSelectedRowKeys = []
        this.modelSelectionRows = []
      },
      close () {
        this.$emit('close');
        this.visible = false;
      },
      //关闭页面
      handleCancel () {
        this.close()
      },
      showDrawer() {
        this.visible=true
      },
      //确定关闭页面
      handleOk () {
        this.close();
      },
    }
  }
</script>

<style lang="less" scoped>
  /deep/ .ant-modal-body {
    overflow: hidden;
    padding: 0;
  }
</style>